<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        积分管理
        <span style="color: #999">&nbsp;&nbsp;/&nbsp;&nbsp;</span>流水明细
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="form" label-width="100px">
            <el-form-item label="机构名称">
              <el-input
                placeholder="请输入机构名称"
                v-model="form1.officeName"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="归属机构">
              <el-input
                placeholder="请输入机构名称"
                v-model="form.officeName"
              ></el-input>
            </el-form-item> -->
            <!-- <el-form-item label="归属OEM">
              <el-input
                placeholder="请输入机构名称"
                v-model="form.officeName"
              ></el-input>
            </el-form-item> -->
            <el-form-item label="流水类型">
              <el-select v-model="form1.direction" placeholder="请选择">
                <el-option label="收入" value="0"></el-option>
                <el-option label="支出" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="变更原因">
              <el-select v-model="form1.operType" placeholder="请选择">
                <el-option label="积分差错增加" value="1"></el-option>
                <el-option label="积分差错减少" value="2"></el-option>
                <el-option label="积分冻结" value="3"></el-option>
                <el-option label="积分解冻" value="4"></el-option>
                <el-option label="网申办卡" value="5"></el-option>
                <el-option label="购买商品积分" value="6"></el-option>
                <el-option label="兑换商品销分" value="7"></el-option>
                <el-option label="伙伴拉新" value="8"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发生时间">
              <div style="display: flex">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期"
                  v-model="form1.startDate"
                  style="width: 100%"
                ></el-date-picker>
                <div class="times">&nbsp;&nbsp;-&nbsp;&nbsp;</div>
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期"
                  v-model="form1.endDate"
                  style="width: 100%"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-form>
          <div style="clear: both"></div>
          <div style="margin-left: 30px; margin-top: 10px">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="rest">重置</el-button>
            <!-- <el-dropdown @command="handleCommand">
              <el-button size="mini" type="primary" plain>
                新建规则<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="new">兑换商品</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </div>
        </div>
        <el-table
          style="margin-top: 30px"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          ref="multipleTable"
        >
          <el-table-column
            min-width="200"
            label="机构ID"
            prop="objUid"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="机构名称"
            prop="officeName"
          ></el-table-column>
          <el-table-column min-width="200" label="流水类型">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.direction == 0">收入</span>
                <span v-if="scope.row.direction == 1">支出</span>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            min-width="200"
            label="归属机构"
            prop="channelName"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="归属OEM"
            prop="channelName"
          ></el-table-column> -->
          <el-table-column min-width="200" label="积分变动" prop="channelName">
            <template slot-scope="scope">
              {{ scope.row.actualAmt }}
              
            </template>
          </el-table-column>
          <el-table-column min-width="200" label="变动原因">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.operType == 1">积分差错增加</span>
                <span v-if="scope.row.operType == 2">积分差错减少</span>
                <span v-if="scope.row.operType == 3">积分冻结</span>
                <span v-if="scope.row.operType == 4">积分解冻</span>
                <span v-if="scope.row.operType == 5">网申办卡</span>
                <span v-if="scope.row.operType == 6">购买商品积分</span>
                <span v-if="scope.row.operType == 7">兑换商品销分</span>
                <span v-if="scope.row.operType == 8">伙伴拉新</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            min-width="200"
            label="当前积分"
            prop="balAmt"
          ></el-table-column>
          <el-table-column
            min-width="200"
            label="发生时间"
            prop="createDate"
          ></el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="form1.currPage"
          :page-size="form1.pageSize"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { currentDate, sevenData, CompareDate } from "../../assets/js/commion";

export default {
  data() {
    return {
      values: "1",
      // 表格
      list: [
        {
          channelName: "123",
        },
      ],
      form: {
        officeName: "",
        startDate: "",
        endDate: "",
      },
      // 表格传递的数据
      form1: {
        operType: "",
        direction: "", //收入  支出
        scoAccUid: "", //积分账户id
        officeName: "", //机构账户民成功
        startDate: "", //开始时间
        endDate: "", //结束时间
        pageSize: 20, //一页几条
        currPage: 1, //第几页
      },
      tableData: "",
      total: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 重置
    rest() {
      this.form1.currPage = 1;
      this.form1.operType = "";
      this.form1.direction = "";
      this.form1.officeName = "";
      this.form1.endDate = "";
      this.form1.startDate = ""
      this.getData();
    },
    // 搜索
    search() {
      if (this.form1.startDate != "" && this.form1.endDate != "") {
        if (CompareDate(this.form1.startDate, this.form1.endDate)) {
          this.form1.currPage = 1
          this.getData();
        } else {
          layer.open({
              content:"结束时间不能早于开始时间",
              skin: "msg",
              time: 1 //1秒后自动关闭
            });
        }
      } else {
        this.form1.currPage = 1
        this.getData();
      }
    },
    // 获取列表数据
    getData() {
      axios
        .post("scoAccountDetail/accountDetail", this.form1)
        .then((res) => {
          console.log("获取的数据");
          console.log(res);

          if (res.data.code == "0000") {
            this.tableData = res.data.data.records;
            this.total = Number(res.data.data.total);
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCommand(command) {
      console.log(command);
    },
    // 第几页
    handleCurrentChange(val) {
      console.log(val);
      this.form1.currPage = val;
      this.getData();
    },
    // 每页几条
    handleSizeChange(val) {
      console.log(val);
      this.form1.pageSize = val;
      this.getData();
    },
  },
};
</script>

<style>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>